<template>
  <div id="staff" class="manage-pos">
    <tag-box v-show="showChild">
      <template v-slot:department>
        <div class="opentype-tag choose-bg-tag">员工信息</div>
      </template>
    </tag-box>
    <div class="dep_top" v-show="!showChild">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="员工姓名">
                <a-input
                  placeholder="请输入"
                  v-model="queryParam.username"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="员工工号">
                <a-input
                  v-model="queryParam.employee_num"
                  placeholder="请输入"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="部门">
                <a-select
                  v-model="queryParam.dep_id"
                  placeholder="请选择">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option
                    v-for="(item) in departments"
                    :key="item.id"
                    :value="item.id">
                <span
                  style="display: inline-block;width: 100%"
                  :title=" item.name">
                  {{ item.name }}
                </span>
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" v-action:query @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px;" @click="() => this.handleReset()">重置</a-button>
                <a-button type="danger" style="margin-left: 8px;" v-action:add @click="() => this.openAddComp()">新增</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
    <div class="dep_main" v-show="!showChild">
      <s-table
        ref="table"
        size="default"
        :row-key="(r,i) => i.toString()"
        :columns="columns"
        :data="loadData">
        <span slot="action" slot-scope="t, r">
          <a
            v-action:edit
            href="javascript:void(0);"
            @click="editStaff(r)">编辑</a>
          <a-divider type="vertical" />
          <a v-action:delete href="javascript:void(0);" @click="() => del(r.id)">删除</a>
        </span>
      </s-table>
    </div>
    <transition name="slide-fade">
      <div class="popContainer" v-if="showChild">
        <edit-staff
          :open-type="openType"
          :show-child.sync="showChild"
          :position-list="codeAllList"
          :form-data="formData"
          @addStaff="addStaff"
          @updateStaff="updateStaff"
        ></edit-staff>
      </div>
    </transition>
  </div>
</template>
<script>
import EditStaff from './EditStaff' // 查询组件
import { employeeList, codeAll, addStaff, changeStaff, deleteStaff } from '@/api/leave'
import { TagBox } from '@/myComponents'
import { STable } from '@/components'
export default {
  name: 'Staff',
  components: {
    EditStaff,
    TagBox,
    STable
  },
  data () {
    return {
      loading: false,
      openType: 0,
      formData: {},
      showChild: false,
      codeAllList: [], // 职位列表,
      columns: [
        {
          title: '序号',
          width: 50,
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: (t, r, index) => {
            return ((this.paginationInfo.pageNum - 1) * this.paginationInfo.pageSize + index + 1)
          }
        },
        {
          title: '工号',
          width: 90,
          align: 'center',
          dataIndex: 'employee_num'
        },
        {
          title: '姓名',
          width: 90,
          align: 'center',
          dataIndex: 'username'
        },
        {
          title: '部门',
          width: 100,
          align: 'center',
          dataIndex: 'lasDepartmentinfo.depname'
        },
        {
          title: '职位',
          width: 90,
          align: 'center',
          dataIndex: 'lasCode.item_desc'
        },
        {
          title: '电话',
          width: 90,
          align: 'center',
          dataIndex: 'telephone'
        },

        {
          title: '操作',
          width: 90,
          dataIndex: '',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      queryParam: {},
      paginationInfo: null,
      loadData: parameter => {
        this.paginationInfo = parameter
        return employeeList(Object.assign(parameter, this.queryParam))
          .then(res => {
            if (res.code === 0) {
              return res.data
            } else {
              this.$message.error(res.msg)
              return {
                list: []
              }
            }
          })
      }
    }
  },
  computed: {
    departments () {
      return this.$store.getters.departments
    }
  },
  mounted () {
    this.roll() // 获取部门和职位列表，不用重复访问
  },
  methods: {
    openAddComp () {
      this.showChild = true
      this.openType = 0
    },
    async roll () {
      // 获取职位列表
      /* eslint-disable */
      const list = { item_type_id: '1' }
      const codeList = await codeAll(list)
      if (codeList.code === 0) {
        for (var key in codeList.data) {
          let { item_desc, item_val } = codeList.data[key];
          this.codeAllList.push({ item_desc, item_val });
          /* eslint-disable */
        }
      }
    },
    handleReset () {
      this.queryParam = {}
      this.$refs.table.refresh(true)
    },
    editStaff (value) {
      this.openType = 1
      this.formData = value
      this.showChild = true
    },
    async addStaff(obj) {
      //新增员工
      let staffMsg = await addStaff(obj);
      if (staffMsg.code == 0) {
        this.$message.success(staffMsg.msg);
        this.$refs.table.refresh(true)
        this.$store.dispatch('setEmployees')
      } else {
        this.$message.warning(staffMsg.msg);
      }
    },
    async updateStaff(data){
       let {employee_num,username,sex,item_type_id,item_val,telephone,dep_id}=data
       const dataMsg={employee_num,username,sex,item_type_id,item_val,telephone,dep_id}
      //修改员工
        let changeMsg = await changeStaff(data.id,dataMsg);
        if (changeMsg.code == 0) {
          this.$message.success(changeMsg.msg);
          this.$refs.table.refresh()
          this.$store.dispatch('setEmployees')
      } else {
        this.$message.warning( changeMsg.msg);
      }
    },
    del (id){
      let _this = this
      this.$confirm({
        title: '确定删除该员工么',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          deleteStaff(id).then(res => {
            if (res.success) {
              _this.$message.success(res.msg)
              _this.$refs.table.refresh(true)
              _this.$store.dispatch('setEmployees')
            } else {
              _this.$message.warning(res.msg)
            }
          })
        },
        onCancel () {
        }
      })
    }
  }
};
</script>
<style scoped>

.el-table td,
.el-table th {
  text-align: center;
}
.selectForm {
  margin-top: 10px;
}
.block {
  margin-top: 5px;
}
/*.popContainer {*/
/*  position: fixed;*/
/*  display: flex;*/
/*  top: 0;*/
/*  left: 180px;*/
/*  right: 0;*/
/*  bottom: 0;*/
/*  z-index: 1000;*/
/*  background: rgba(16, 16, 16, 0.2);*/
/*}*/


.el-col-5{height: 50px;}
</style>